<template>
  <div class="information">
    <div v-show="isShow">
      <div class="activity-information">
        <label v-for="(item, index) in title">
          <label>{{item}}</label>
          <label>{{actSelected[key[index]]}}</label>
        </label>
      </div>
      <div class="number-tips"><label>已有 </label><a @click="getApplicants" href="#">{{number}}</a><label> 人报名</label></div>
      <share :config="shareConfig" class="share"></share>
      <Dialog v-show="showDialog" :applycants="applycants" :showDialog="showDialog" @hideDialog="showDialog=false"></Dialog>
    </div>
  </div>
</template>
<script>
  import Dialog from './Dialog.vue'

  export default {
    name: 'Label',
    data(){
      return {
        title:['发起人：','时间：','地点：'],
        key:['source','time','position'],  //作为索引
        number:0,  //报名人数
        applycants:[],  //报名人员具体情况
        showDialog: false, //是否显示模态框
        shareConfig:{
          url: 'https://www.baidu.com', // 网址，默认使用 window.location.href
          source: '', // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
          title: '', // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
          description: '', // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
          image: '', // 图片, 默认取网页中第一个img标签
          sites: ['wechat','qq', 'qzone', 'weibo', 'douban'], // 启用的站点
          disabled: ['google', 'facebook', 'twitter'], // 禁用的站点
          wechatQrcodeTitle:'微信扫一扫：分享',
          wechatQrcodeHelper  : '<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'
        }
      }
    },
    components:{
      Dialog
    },
    props:[
      'actSelected',
      'isShow',
      'applycantNumber'
    ],
    beforeUpdate(){
      let people = this.actSelected.people;
      if(!people) return;
      let count = 0;
      for(let i=0; i<people.length; i++) {
        count += people[i].number;
      }
      this.number = count;
      this.applycants = people;
    },
    methods:{
      //获取报名人员
      getApplicants() {
         this.showDialog = true;
      },
      setNumber(number) {
        this.number += number;
        console.log(this.number);
      }
    }
  }
</script>
<style>
  .information{
    margin-top: 16px;
    margin-bottom: 30px;
    min-height: 50px;
  }
  .activity-information label {
    font-weight: bold;
    font-size: 14px;
    color: #595959;
    letter-spacing: 0;
    line-height: 21px;
  }
  .activity-information > label {
    margin-right: 24px;
  }
  .information .number-tips {
    margin-top: 10px;
  }
  .information a {
    color: #00BC7E;
  }
  .application .share {
   margin-top: 10px;
  }

</style>
